<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-03-29 
 -->


<template>
  <el-row class="panel">
    <el-col v-for="(item, index) in tools" :key="index" @click.native="PanelClick(item)">
      <span :class="item.icon">&nbsp;{{item.label}}</span>
      <el-col>
        <el-col v-for="val, key in item.children" :key="key" @click.native="TypeDraw(val)"><i :class="val.icon" />{{val.label}}</el-col>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import { createRectangle, createRegularPolygon } from "../utils";
export default {
  name: 'Panel',
  data() {
    return {
      tools: [
        { icon: "el-icon-eleme", label: "放大", type: "zoomIn" },
        { icon: "el-icon-eleme", label: "缩小", type: "zoomOut" },
        { icon: "el-icon-eleme", label: "复位", type: "reset" },
        {
          icon: "el-icon-eleme", label: "图形绘制", type: false, children: [
            { icon: "el-icon-eleme", label: "停止绘制", type: "Stop" },
            { icon: "el-icon-eleme", label: "点", type: "Point" },
            { icon: "el-icon-eleme", label: "多边形", type: "Polygon" },
            { icon: "el-icon-eleme", label: "正方形", type: "Square" },
            { icon: "el-icon-eleme", label: "矩形", type: "Rectangle" },
            { icon: "el-icon-eleme", label: "清空绘制", type: "Clear" }
          ]
        },
        {
          icon: "el-icon-eleme", label: "测量", type: false, children: [
            { icon: "el-icon-eleme", label: "长度测量", type: "LineString" },
            { icon: "el-icon-eleme", label: "面积测量", type: "area" },
            { icon: "el-icon-eleme", label: "清空测量", type: "clearMeasures" },
          ]
        }
      ]
    };
  },

  mounted() { },

  methods: {
    PanelClick(item) {
      if (!item.type) return;
      this.$emit("panelClick", {type: item.type});
    },
    TypeDraw({type}) {
      this.stopDraw();
      let geometry, maxPoints, style = null;
      switch (type) {
        case "Clear":
          return this.clearDraw();
        case "Stop":
          return this.stopDraw();
        case "Square":
          type = "Circle";
          geometry = createRegularPolygon;
          break;
        case "Point":
          type = "Point";
          style = new ol.style.Style({ zIndex: '100', image: new ol.style.Icon({ src: require("../utils/img/8.png"), scale: 0.5, anchor: [0.5, 1] }) });
          break;
        case "Rectangle":
          type = "LineString";
          maxPoints = 2;
          geometry = createRectangle;
          break;
        case "LineString":
          return this.$emit("measuresDraw", type);
        case "area":
          return this.$emit("measuresDraw", "area");
        case "clearMeasures":
          return this.$emit("measuresDraw", "clearMeasures");
        default:
          break;
      }
      const standardDraw = { type, style, geometry, maxPoints, freeDraw: false };
      this.$emit("interactionDrawEvent", standardDraw);
    },
    clearDraw() {
      this.$emit("clearDraw");
    },
    stopDraw() {
      this.$emit("stopDraw");
    },

  }
  //  End
}

</script>
<style lang='scss' scoped>
.el-row {
  height: 36px;
  position: absolute;
  top: 10px;
  right: 3%;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 10px #96a4c5;
  &.panel > .el-col {
    width: 90px;
    height: 100%;
    line-height: 36px;
    position: relative;
    font-size: 14px;
    font-weight: 600;
    &::before {
      content: "";
      width: 1px;
      height: 26px;
      background: #ddd;
      position: absolute;
      right: -1px;
      top: 4px;
    }
    &:hover {
      color: white;
      background-color: #2e6dfc;
    }
    &:hover .el-col {
      display: block;
    }
    & > .el-col {
      position: absolute;
      top: 36px;
      display: none;
      transition: 0.65s display;
      box-shadow: 0 0 10px #96a4c5;
      > .el-col {
        width: 90px;
        height: 32px;
        color: #606266;
        background-color: #fff;
        text-align: left;
        padding-left: 25px;
        position: relative;
        font-size: 14px;
        font-weight: 400;
        & > i,
        span {
          position: absolute;
          top: 10px;
          left: 7px;
        }
        &:hover {
          background-color: #ecf5ff;
          color: #2e6dfc;
          cursor: pointer;
        }
        &:not(:first-child) {
          border-top: 1px solid #dcdfe6;
        }
      }
    }
  }
}
</style>
